<template>
  <yd-layout class="m-address">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="地址管理" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <w-empty v-if="!addressList.length"></w-empty>

    <div class="m-address-ct" v-else>
      <section class="item" v-for="(address, index) in addressList" :key="index" @click.stop="onSelectAddress(address.id)">
        <div class="name">
          <span>{{address.trueName}}</span>
          <span>{{address.mobile}}</span>
          <span>{{address.telephone}}</span>
        </div>
        <div class="address">{{address.provinceName}} {{address.cityName}} {{address.areaName}} {{address.area_info}}</div>
        <div class="tool">
          <yd-radio-group v-model="address.default_val" color="#f00385" size="14" @click.native.stop="onSetDefault(address.id)">
            <yd-radio val="1">默认地址</yd-radio>
          </yd-radio-group>
          <div class="opeate">
            <span v-if="!$route.query.redirect" @click.stop="$router.push(`/address/manage?id=${address.id}`)"><yd-icon name="compose" size=".26rem"></yd-icon> 编辑</span>&nbsp&nbsp
            <span @click.stop="onDelete(address.id)"><yd-icon name="delete" size=".26rem"></yd-icon> 删除</span>
          </div> 
        </div>
      </section>
    </div>

    <button slot="tabbar" class="u-address-add-btn" @click="$router.push('/address/manage')">新增地址</button>
  </yd-layout>
</template>

<script>
  import { apiAddressAll, apiDefaultAddress, apiDelAddress } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        addressList: []
      }
    },
    created() {
      apiAddressAll(this.token).then(data => {
        this.addressList = data.addressList || []
      })
    },
    methods: {
      onDelete(id) {
        this.$dialog.confirm({
          title: '提示',
          mes: '是否确认删除此地址',
          opts: () => {
            apiDelAddress(this.token, id).then(data => {
              this.$toast('删除成功', () => {
                this.addressList.forEach((item, index) => {
                  if (item.id == id) {
                    this.addressList.splice(index, 1)
                  }
                })
              })
            })
          }
        })
      },
      onSetDefault(id) {
        apiDefaultAddress(this.token, id).then(data => {
          this.addressList.forEach((item, index) => {
            item.default_val = 0
            if (item.id == id) {
              item.default_val = 1
            }
          })
        })
      },
      onSelectAddress(id) {
        const sRedirect = decodeURIComponent(this.$route.query.redirect || '')
        if (sRedirect) {
          if (sRedirect.indexOf('addressid') != -1) {
            const aUrl = sRedirect.split('?')
            const sUrl = aUrl[0]
            const aParams = aUrl[1].split('&')
            const newParams = []
            aParams.forEach(params => {
              if (params.indexOf('addressid') != -1) {
                newParams.push(`addressid=${id}`)
              } else {
                newParams.push(params)
              }
            })
            this.$router.replace(`${sUrl}?${newParams.join('&')}`)
          } else {
            if (sRedirect.indexOf('?') != -1) {
              this.$router.replace(`${sRedirect}&addressid=${id}`)
            } else {
              this.$router.replace(`${sRedirect}?addressid=${id}`)
            }
          }
        }
      }
    },
    computed: {
      ...mapGetters(['token'])
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  @import '../../scss/_mixin.scss';
  .u-address-add-btn {
    height: .9rem;
    border: none;
    background: #ef5c6e;
    color: #fff;
    font-size: .3rem;
  }
  .m-address-ct {
    .item {
      margin-bottom: .1rem;
      padding: 0 .3rem;
      background: #fff;
      .name {
        @include flex();
        height: 1rem;
        font-size: .28rem;
        color: #333;
      }
      .address {
        @include cutoff();
        line-height: .4rem;
        font-size: .26rem;
        color: #666;
      }
      .tool {
        @include flex();
        margin-top: .3rem;
        height: .9rem;
        border-top: 1px solid #f4f4f4;
        .yd-radio-text {
          color: #ef5c6e;
          font-size: .24rem;
        }
        .opeate {
          color: #333;
          font-size: .26rem;
        }
      }
    }
  }
</style>